<template>
  <div>
    <!-- 编辑推荐 -->
    <div class="db-long-reco">
      <div class="container">
        <div class="tittle">
          <h2>编辑推荐</h2>
        </div>
        <div id="first-carousel" class="carousel slide first-carousel-area">
          <div class="carousel-inner-area">
            <div class="carousel-item active">
              <div class="book-items d-flex justify-content-between flex-wrap">
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <router-link href="" to="/publish_details" class="book-pic">
                      <span class="cover-label"></span>
                      <img :src="src1" alt="" />
                    </router-link>
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">薛定谔的爱情</span>
                    <span class="book-writer d-block">可口可乐加冰</span>
                    <div class="book-intro">
                      这是一个坏女人的故事，但她活成了女人们梦寐以求的样子
                    </div>
                    <a href="" class="book-type">现代言情</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <router-link href="" to="/publish_details" class="book-pic">
                      <span class="cover-label"></span>
                      <img :src="src2" alt="" />
                    </router-link>
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">叔叔阿姨行行好</span>
                    <span class="book-writer d-block">亚麻</span>
                    <div class="book-intro">
                      一个8岁的孩子，如何度过绑架后的1888个日夜？
                    </div>
                    <a href="" class="book-type">罪案故事</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <router-link href="" to="/publish_details" class="book-pic">
                      <span class="cover-label"></span>
                      <img :src="src3" alt="" />
                    </router-link>
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">关东异人</span>
                    <span class="book-writer d-block">张半天</span>
                    <div class="book-intro">
                      东北风味探险故事，活宝师徒张半天和刘栓子再次登场。
                    </div>
                    <a href="" class="book-type">奇遇怪谈</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <router-link href="" to="/publish_details" class="book-pic">
                      <span class="cover-label"></span>
                      <img :src="src4" alt="" />
                    </router-link>
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">180天陪产计划</span>
                    <span class="book-writer d-block">楚棠</span>
                    <div class="book-intro">
                      鸡飞狗跳的二胎故事：28岁的啃老大龄女青年，刚刚得知他妈再婚后又怀孕了。
                    </div>
                    <a href="" class="book-type">罪案故事</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="book-items d-flex justify-content-between flex-wrap">
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <img :src="src1" alt="" />
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">薛定谔的爱情</span>
                    <span class="book-writer d-block">可口可乐加冰</span>
                    <div class="book-intro">
                      这是一个坏女人的故事，但她活成了女人们梦寐以求的样子
                    </div>
                    <a href="" class="book-type">现代言情</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <img :src="src2" alt="" />
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">叔叔阿姨行行好</span>
                    <span class="book-writer d-block">亚麻</span>
                    <div class="book-intro">
                      一个8岁的孩子，如何度过绑架后的1888个日夜？
                    </div>
                    <a href="" class="book-type">罪案故事</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <img :src="src3" alt="" />
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">关东异人</span>
                    <span class="book-writer d-block">张半天</span>
                    <div class="book-intro">
                      东北风味探险故事，活宝师徒张半天和刘栓子再次登场。
                    </div>
                    <a href="" class="book-type">奇遇怪谈</a>
                  </div>
                </div>
                <div class="book1 d-flex col-md-6 col-sm-12">
                  <div class="pic">
                    <img :src="src4" alt="" />
                  </div>
                  <div class="details">
                    <span class="book-tittle d-block">180天陪产计划</span>
                    <span class="book-writer d-block">楚棠</span>
                    <div class="book-intro">
                      鸡飞狗跳的二胎故事：28岁的啃老大龄女青年，刚刚得知他妈再婚后又怀孕了。
                    </div>
                    <a href="" class="book-type">罪案故事</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>  
      </div>
      <button
          class="carousel-control-prev db-btn1"
          type="button"
          data-target="#first-carousel"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button
          class="carousel-control-next db-btn2"
          type="button"
          data-target="#first-carousel"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src1: "/image/recomend/33683755.jpg",
      src2: "/image/recomend/35803435.jpg",
      src3: "/image/recomend/32659678.jpg",
      src4: "/image/recomend/36164752.jpg",
    };
  },
};
</script>

<style scoped>
.db-long-reco{
  background-color: #ffffff;
}
.container {
  overflow: hidden;
}
.tittle {
  position: relative;
}
.tittle h2 {
  width: 80px;
  height: 30px;
  background-color: #bb996d;
  font-size: 14px;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 3px;
  position: absolute;
  top: 0;
}

.book-items {
  margin: 0 10px;
  padding: 40px 0px 10px;
  max-width: 1220px;
}
.book-items .book1 {
  width: 630px;
  height: 205px;
  padding: 20px 20px 20px 10px;
}
.book-items .book1 .pic {
  width: 110px;
  position: relative;
  border-radius: 4px;
  box-shadow: 3px 3px 3px #ccc;
  overflow: hidden;
}
.book-items .book1 .pic .book-pic:hover:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 165px;
  background-color: rgba(0, 0, 0, 0.05);
}
.book-items .book1 .pic .book-pic .cover-label::before{
  top: 23px;
  right: 21px;
  width: 140px;
  height: 36px;
  font-size: 24px;
  line-height: 36px;
  transform: translate(50%, -100%) rotate(45deg) scale(.5);
  color: rgb(51, 51, 51);
  content: "会员";
  background: rgb(214, 192, 162);
  position: absolute;
  text-align: center;
  transform-origin: bottom center;
}
.book-items .book1 .pic img {
  width: 115px;
  height: 165px; 
}
.book-items .book1 .details {
  width: 400px;
  margin-left: 15px;
  position: relative;
  text-align: left;
}
.book-items .book1 .details .book-tittle {
  width: 240px;
  height: 25px;
  font-size: 20px;
  font-weight: 800;
}
.book-items .book1 .details .book-writer {
  width: 72px;
  height: 14px;
  font-size: 12px;
  color: #777777;
  margin-top: 5px;
}
.book-items .book1 .details .book-intro {
  max-width: 380px;
  position: relative;
  margin: 20px 0 0 0;
  padding: 4px 15px;
  font-size: 14px;
  color: #333;
  text-align: left;
}
.book-items .book1 .details .book-intro::after,
.book-items .book1 .details .book-intro::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
}
.book-items .book1 .details .book-intro::before {
  left: 0;
  top: 0;
  border-top: 1px solid #777777;
  border-left: 1px solid #777777;
}
.book-items .book1 .details .book-intro::after {
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #777777;
  border-right: 1px solid #777777;
}
.book-items .book1 .details .book-type {
  width: 54px;
  height: 16px;
  color: #ffffff;
  background-color: #f26c98;
  font-size: 12px;
  padding: 0px 3px;
  position: absolute;
  left: 0;
  bottom: 8px;
  text-decoration: none;
  border-radius: 3px;
}
.db-long-reco {
  position: relative;
}
.db-long-reco:hover button:first-of-type {
  opacity: 1;
  transform: translate(-100px, 0);
  left: 200px;
}
.db-long-reco:hover button:last-of-type {
  opacity: 1;
  transform: translate(100px, 0);
  right: 200px;
}
.db-long-reco button:hover {
  background-color: #389eac;
}
.db-long-reco button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  color: black;
  margin-top: 210px;
  box-shadow: 2px 2px 2px #eee;
  background-color: #eee;
  opacity: 0;
  transition: 0.5s linear;
  position: absolute;
}
</style>